---
title: Themes and Dark Mode
---

## Using Official Themes

Univer provides two official themes, `defaultTheme` and `greenTheme`, which are available in the `@univerjs/themes` package. You can choose one based on your needs.

<Callout>
  When no theme is specified, `defaultTheme` is used by default.
</Callout>

### Installing Theme Plugins

#### Preset Mode

In preset mode, themes can be imported from the `@univerjs/presets` package:

```typescript
// import { defaultTheme } from "@univerjs/presets";
import { greenTheme } from '@univerjs/presets'

const { univer } = createUniver({
  theme: greenTheme,
  // theme: defaultTheme,
})
```

#### Plugin Mode

In plugin mode, themes are provided by the `@univerjs/themes` package, which you need to install first.

```package-install
npm install @univerjs/themes
```

```typescript
import { greenTheme } from '@univerjs/themes'
// import { defaultTheme } from "@univerjs/themes";

const univer = new Univer({
  theme: greenTheme,
  // theme: defaultTheme,
})
```

## Customizing Themes

You can customize themes by creating an object that conforms to the `Theme` interface. Refer to [this documentation](/reference/types/theme) to understand how the default theme variables are defined.

```typescript title="custom-theme.ts"
import type { Theme } from '@univerjs/presets'
// import type { Theme } from "@univerjs/themes";

export const customTheme: Theme = {
  white: '#FEFEFE',
  black: '#1C1C1C',
  primary: {
    50: '#F6F5FF',
    100: '#EDEBFE',
    200: '#DCD7FE',
    300: '#CABFFD',
    400: '#AC94FA',
    500: '#9061F9',
    600: '#7E3AF2',
    700: '#6C2BD9',
    800: '#5521B5',
    900: '#4A1D96',
  },
  // ...
}
```

```typescript
// Import your custom theme here
import { customTheme } from './custom-theme'

const univer = new Univer({
  theme: customTheme,
})
```

## Dark Mode

Univer supports dark mode, which can be enabled by setting the `darkMode` property to `true`.

```typescript
new Univer({
  darkMode: true,
})
```

### Facade API

You can also dynamically toggle dark mode using the Facade API.

```typescript
// Enable dark mode
univerAPI.toggleDarkMode(true)

// Disable dark mode
univerAPI.toggleDarkMode(false)
```
